<template>
	<view class="user page">
		<view class="search">
			<input class="inp" v-model="filter" placeholder="搜索" type="text">
		</view>
		<view class="users">
				<scroll-view style="height: 100%;" class="scroll" scroll-y="true">
			<view class="items">
				<view class="item" v-if="userList[key].length>0" v-for="(key,index) in keys" :key="index">
					<view class="title">{{key}}</view>
					<view class="user-item" v-for="(item,index) in userList[key]" :key="index">
						<image class="avatar" :src="item.avatar"></image>
						<view class="user-info">
							<text class="name">{{item.name}}</text>
							<text class="code">{{item.code}}</text>
						</view>
					</view>
					
				</view>
				
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {findByTop} from '@/api/user.js'
	export default {
		onShow() {
			findByTop().then(res=>{
				this.userVos = res.data
			})
		},
		data() {
			return {
				userVos:[],
				filter:null
			};
		},
		computed:{
			 keys(){
				return Object.keys(this.userList) 
			 },
			 userList() {
			                let letter = {
			                    A: [],
			                    B: [],
			                    C: [],
			                    D: [],
			                    E: [],
			                    F: [],
			                    G: [],
			                    H: [],
			                    I: [],
			                    J: [],
			                    K: [],
			                    L: [],
			                    M: [],
			                    N: [],
			                    O: [],
			                    P: [],
			                    Q: [],
			                    R: [],
			                    S: [],
			                    T: [],
			                    U: [],
			                    V: [],
			                    W: [],
			                    X: [],
			                    Y: [],
			                    Z: [],
			                    '#': []
			                }
			                let pinyin = require("pinyin")
			                let reg = /^[A-Za-z]+$/
			                this.userVos.forEach(vo => {
								if(this.filter&&this.filter!=''){
									if(this.filter!=vo.name&&this.filter!=vo.mobile&&this.filter!=vo.code){
										return
									}
								}
			                    if(vo.name!=''&&vo.name){
			                        let p = pinyin(vo.name)[0][0].charAt(0)
			                        if (reg.test(p)) {
			                            letter[p.toLocaleUpperCase()].push(vo)
			                        } else {
			                            letter['#'].push(vo)
			                        }
			                    }else {
			                        letter['#'].push(vo)
			                    }
			                })
			                return letter
			            }
		}
	}
</script>

<style lang="stylus" scoped>
	.user
		background url(../../static/hbg.png) no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
		display flex
		flex-direction column
		padding 0upx 20upx
		.search
			margin-bottom 10upx
			height 60upx
			border-radius:10upx;
			background-color white
			.inp
				height 100%
				outline none
				color #A1A1A1
				font-size 24upx
				text-align center
		.users
			overflow hidden
			flex 1
			.items
				.title
					color #6F6F6F
					font-size 24upx
					height 60upx
					line-height 60upx
				.user-item
					height 120upx
					display flex
					align-items center
					background-color white
					padding-left 30upx
					.avatar
						height 80upx
						width 80upx
						border-radius 10upx
						margin-right 31upx
					.user-info
						display flex
						flex-direction column
						height 100%
						border-bottom 1px solid #DBDBDB
						justify-content center
						flex 1
						.name
							color #4D3D07
							font-size 26upx
						.code
							color #A1A1A1
							font-size 22upx
					&:last-child
						.user-info
							border-bottom none
						
				
			
			
			
</style>
